<template>
    <div class="container">
        <div class="tabList">
            <div class="tabItem">
                <div class="itemBar"  @click="downShowF">
                    
                    
                    <div class="textworld">
                        <text class="titword">体质测评20190922</text>
                    </div>
                    <div class="btnAll">
                        <button class="button"  :eeui="{text:'范围发布', model:'green'}" @click="openMask"></button>
                        <icon class="iconmore" @click="openBottomPopup" :eeui="{content:'ios-more',fontSize:44}"></icon>
                    </div>
                    
                </div>
                <div class="downList" v-if="downShow">
                    <div class="downitem">
                        <div class="downIMg">
                            <text class="leftIcon">&#xe606;</text>
                        </div>
                        <div class="dowmTitBox" >
                            <text class="dowmTit">跑步</text>
                            <text class="dowmTitFu">总计：4   合格：0   不合格：4（免跑：0）</text>
                        </div>
                        

                    </div>
                    
                </div>
            </div>
            
            
        </div>

        <wxc-popup popup-color="#ffffff"
                :show="isBottomShow"
                @wxcPopupOverlayClicked="popupOverlayBottomClick"
                pos="bottom"
                height="400">
            <div class="popover-content">
                <text class="popoverTit">第一章 体制与健康概述</text>
                <div class="popoverIconList">
                    <div class="popoverItem" @click="editenter">
                        <text class="iconfontIcon iconfontIcon3">&#xe725;</text>
                        <text class="popoverText">编辑</text>
                    </div>
                    <!-- <div class="popoverItem" @click="setenter">
                        <text class="iconfontIcon iconfontIcon2">&#xe62e;</text>
                        <text class="popoverText">设置</text>
                    </div> -->
                    <div class="popoverItem" @click="summenter">
                        <text class="iconfontIcon iconfontIcon5">&#xe635;</text>
                        <text class="popoverText">汇总分析</text>
                    </div>
                     <div class="popoverItem">
                        <text class="iconfontIcon iconfontIcon4">&#xe62c;</text>
                        <text class="popoverText">删除</text>
                    </div>
                    
                </div>
                <text class="cancelBtn" @click="popupOverlayBottomClick">取消</text>
            </div>
        </wxc-popup>


        <!-- mask -->
        <wxc-mask height="800"
                width="660"
                border-radius="6"
                duration="200"
                mask-bg-color="#FFFFFF"
                :has-animation="hasAnimation"
                :has-overlay="true"
                :show-close="true"
                :show="maskshow"
                @wxcMaskSetHidden="wxcMaskSetHidden">
            <div class="content" @click="stopdev">
                <text class="masktitle">范围发布管理</text>
                <div class="maskcont">
                    <div class="maskclassLinebox">
                        <div class="maskclassLine">
                            <div class="sendleft">
                                <text class="sendlefttit" @click="sendenter('发布预览')">2020/02/22</text>
                                <text class="sendlefttype">:全部</text>
                            </div>
                            
                            <div class="sendbtn">
                                <text class="sendbtnicon">&#xe613;</text>
                                <text class="sendbtntext">发布</text>
                            </div>
                        </div>  
                        <div class="maskclassLine">
                            <div class="sendleft">
                                <text class="sendlefttit" @click="sendenter('发布预览')">2020/02/22</text>
                                <text class="sendlefttype">:全部</text>
                            </div>
                            
                            <div class="sendbtn">
                                <text class="sendbtnicon">&#xe613;</text>
                                <text class="sendbtntext">发布</text>
                            </div>
                        </div> 
                        <div class="maskclassLine">
                            <div class="sendleft">
                                <text class="sendlefttit" @click="sendenter('发布预览')">2020/02/22</text>
                                <text class="sendlefttype">:全部</text>
                            </div>
                            
                            <div class="sendbtn">
                                <text class="sendbtnicon">&#xe613;</text>
                                <text class="sendbtntext">发布</text>
                            </div>
                        </div> 
                        <div class="maskclassLine">
                            <div class="sendleft">
                                <text class="sendlefttit" @click="sendenter('发布预览')">2020/02/22</text>
                                <text class="sendlefttype">:全部</text>
                            </div>
                            
                            <div class="sendbtn">
                                <text class="sendbtnicon">&#xe613;</text>
                                <text class="sendbtntext">发布</text>
                            </div>
                        </div> 
                    </div>

                    <div class="commitBtn">
                        <button class="maskbutton"  @click="sendenter('新增发布范围')" :eeui="{text:'新增发布',borderRadius:'0',backgroundColor:'#eaeaea',color:'#222222'}"></button>
                        <button class="maskbutton" :eeui="{text:'确定',borderRadius:'0',backgroundColor:'#2fdc7e',color:'#ffffff'}"></button>
                    </div>

                </div>
                
            </div>
        </wxc-mask>
    </div>
</template>
<script>
    import { WxcPopup,WxcDialog,WxcMask } from 'weex-ui';
     export default {
         components: { WxcPopup,WxcDialog,WxcMask },
         data(){
             return{
                 downShow:true,
                 maskshow: false,
                isFalse: false,
                hasAnimation: true,
                isBottomShow: false,
                height: 400
             }
         },
          methods: {
              downShowF(){
                  this.downShow = !this.downShow;
              },
            openBottomPopup () {
                this.isBottomShow = true;
            },
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick () {
                this.isBottomShow = false;
            },
            openMask (e) {//打开范围发布
                this.maskshow = true;
                this.hasAnimation = true;
            },
            wxcMaskSetHidden () {
                this.maskshow = false;
            },
            editenter(){
                eeui.openPage(
                    {
                    url: "editpage.js",
                    statusBarColor: "#1eb76e",
                    pageName: "编辑",
                    animated: false,
                    params: {}
                    },
                    function(result) {
                    //......
                    }
                );
            },
            sendenter(val){
                eeui.openPage(
                    {
                    url: "sendset.js",
                    statusBarColor: "#1eb76e",
                    pageName: "发送设置",
                    animated: false,
                    params: {title:val}
                    },
                    function(result) {
                    //......
                    }
                );
            },
            setenter(){
                eeui.openPage(
                    {
                    url: "set.js",
                    statusBarColor: "#1eb76e",
                    pageName: "设置",
                    animated: false,
                    params: {}
                    },
                    function(result) {
                    //......
                    }
                );
            },
            summenter(){
                eeui.openPage(
                    {
                    url: "summpage.js",
                    statusBarColor: "#1eb76e",
                    pageName: "汇总",
                    animated: false,
                    params: {}
                    },
                    function(result) {
                    //......
                    }
                );
            },
            stopdev(){}
        },
        created(){
            // 添加 字体图标
            let domModule = weex.requireModule('dom');
            domModule.addRule('fontFace',{
            'fontFamily': "iconfont",
            'src': "url('http://at.alicdn.com/t/font_1628280_u25b2saixto.ttf')"
            })

           
        }
     }
</script>
<style scoped>
.container{
    width: 750;
    background-color: #fff;
}
.itemBar{
    height:150;
    flex-direction: row;
    border-bottom-color: #ebebeb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    justify-content:space-between;
    margin-left:30;
    margin-right:30;
}
.imgbox{
    width: 150px;
    height: 94px;
    position: relative;
    border-radius: 6px;
    margin-top: 30px;
    margin-left: 30px;
}
.textworld{
    width: 440px;
    justify-content:center;
    
}
.titword{
    font-size: 28;
    color: #999;
    font-weight:bold;
}

.ren{
   font-size: 20;
   color: #999; 
}
.imgtext{
    width: 150px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    font-size: 20;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}
.button {
    font-size: 24px;
    margin-left: 37px;

    width: 120px;
    height: 50px;
    color: #ffffff;
    margin-top:45px;
}

.downIMg{
    margin-left: 70px;
    width:90;
    height:90;
    background-color:#f43129;
    align-items:center;
    justify-content:center;
}
.leftIcon{
    font-family:iconfont;
    font-size:60;
    color:#fff;
}

.downitem{
    flex-direction: row;
    padding-top: 20px;
    align-items: center;
     border-bottom-color: #ebebeb;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom:20px;
    background-color:#fbfbfb;
}
.dowmTit{
    font-size: 26;
    color: #666;
    margin-left: 20px;
    font-weight:bold;
    margin-bottom:10px;
}
.dowmTitFu{
    margin-left: 20px;
    font-size:20px;
    color:#999;
    font-weight:bold;
}
.iconmore{
    width: 100px;
    height: 30px;
    color: #999;
    margin-left:50;
    margin-top:10;
}
.popoverTit{
    height: 66;
    line-height: 66;
    font-size: 30;
    color: #333;
    border-bottom-color: #999;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-align: center;
}
.popoverIconList{
    flex-direction: row;
   flex-wrap: wrap; 
   height:332;
}
.popoverItem{
    width: 250px;
    margin-top: 30px;

}
.popoverText{
    text-align: center;
    font-size: 26;
    color: #666;
}
.maskclassLinebox{
    height: 620;
}
.maskclassLine{
    flex-direction: row;
    justify-content: space-between;
    height: 80;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #999;
    align-items: center;
    margin-left: 30;
    margin-right: 30;
}

.masktitle{
    font-size: 27;
    text-align: center;
    height: 80;
    line-height: 80;
    border-bottom-color: #dddddd;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: #2222;
}
.commitBtn{
    flex-direction: row;
    margin-top: 20;
}
.maskbutton{
    width: 330;
    height: 80;
}
.sendleft{
    flex-direction: row;
}
.sendlefttit{
    font-size: 26;
    width: 200;
    color: #333;
    margin-left: 30;
}
.sendlefttype{
    width: 250;
    color: #999;
    font-size: 24;
}
.sendbtn{
    width: 90;
    height: 40;
    border-width: 1px;
    border-style: solid;
    border-color: #45d586;
    border-radius: 4;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.sendbtntext{
    font-size: 20;
    color: #45d586;
    margin-left: 5;
}
.sendbtnicon{
    font-size: 20;
    font-family: iconfont;
    color: #45d586;
}
.iconfontIcon{
    width: 90px;
    height: 90px;
    background-color: #ff5100;
    color: #fff;
    font-size: 50;
    font-family: iconfont;
    text-align: center;
    line-height: 90;
    margin-left: 80;
    margin-bottom: 10;
}
.iconfontIcon2{
    background-color: #ffa200;
}
.iconfontIcon3{
    background-color: #eb73b1;
}
.iconfontIcon4{
    background-color: #0494ef;
}
.iconfontIcon5{
    background-color: #2fdc7e;
}
.popover-content{
    position:relative;
}
.cancelBtn{
    width:750;
    height:80;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
    line-height:80;
    background-color:#eaeaea;
    color:#666;
    font-size:26;
}
</style>
